#{extends 'main.html' /}
#{set title:'Photo' /}
#{set 'moreScripts'}
	#{script 'photo.js'/}
#{/set}	
#{stylesheet 'photo.css'/}
<div id="photo">
					<h2 align="center">Photos</h2>
					<div id="photo_list" align="left" style="width:410px ;margin-left: 202px">
							<img src="/public/images/default_avatar.png"/>
							<img src="/public/images/temp.jpg"/>
							<img src="/public/images/default_avatar.png"/>
							<img src="/public/images/default_avatar.png"/>
							<img src="/public/images/temp.jpg"/>
							<img src="/public/images/temp.jpg"/>
							<img src="/public/images/default_avatar.png"/>
							<img src="/public/images/temp.jpg"/>
							<img src="/public/images/default_avatar.png"/>
							<img src="/public/images/default_avatar.png"/>
							<img src="/public/images/temp.jpg"/>
							<img src="/public/images/temp.jpg"/>
					</div>		
						<div align="center" id="photo-temp-wrap" >
							<a id="leftsid" title="Previous"></a>							
							<img  style="border:2px solid black;" src="/public/images/temp.jpg"/>
							<a id="rightsid" title="Next"></a>
							<a class="gallerbutton1" id="close" style="position:absolute; top:-1%;margin-left:0%;" title="Close"></a>
							<a class="gallerbutton" id="setprimary" style="position:absolute; top:5%;margin-left:1%;" title="Set Primary"></a>
						</div>
</div>